<template>
	<view class="active-overview">
		<view class="ac-item" v-for="(item, inx) in activityList" :key="inx">
			<view class="info">
				<view class="user-info">
					<image class="head" :src="headHandle(item)" mode="aspectFill" @click.stop="utils.userDetails(item.publisher_account_id, item.publicUserType)"></image>
					<view class="name-time">
						<text class="name">{{item.publicUserName}}</text>
						<text class="time">{{handleTime(item.update_time)}}</text>
					</view>
				</view>
				<view v-if="userInfo.user_type==1" tabindex="-1" class="operation-module" @click.stop="clickOper(inx)" @blur="hideDelete()"> 
					<uni-icons type="more-filled" color="#9FA0A0" size="46rpx"></uni-icons>
					<view v-show="deleteIndex==inx" class="operate-box">
						<text v-if="userInfo.accountId==item.publisher_account_id" class="del-recommend" @click.stop="delActivity(item, inx)">删除</text>
						<text class="del-recommend" @click.stop="editActivity(item, inx)">编辑</text>
					</view>
				</view>
			</view>
			<view class="content">
				<text class="cont-text">{{item.title}}</text>
				<view style="margin-top: 16rpx;" @click="activityDetails(item)">
					<text style="color: #28C2CD;">{{accountId?'查看详情':'报名参加'}}</text>
					<uni-icons type="right" color="#28C2CD" size="28rpx"></uni-icons>
				</view>
			</view>				
			<view class="video-box" v-if="item.video_list&&item.video_list.length>0">
				<zy-video 
					:ref="'videoRef'"
					:refi="'videoRef'"
					:width="utils.getpx(686)"
					:height="utils.getpx(386)"
					@playVideo="playVideo"
					:src="item.video_list[0]"></zy-video>
			</view>
			<view class="images-box" v-else>
				<image class="img" v-for="(path, i) in item.dst_imgs" :key="i" :src="path" mode="aspectFill"></image>
			</view>
		</view>
		<uni-load-more :status="loadMore" color="#BFBFBF"></uni-load-more>
	</view>
</template>
<script>
import textEditor from './text-editor.vue'
export default {
	components: {
		textEditor
	},
	data() {
		return {
			userInfo: {}, // 用户信息
			activityList: [],
			currentPage: 1, // 当前页
			loadMore: 'more',
			deleteIndex: -1, // 需要删除的元素的下标
		}   
	},
	props: {
		onShow: { // 监听页面执行onShow
			type: Number,
			default: 0
		},
		onReachBottom: { // 监听页面上滑
			type: Number,
			default: 0
		},
		accountId: { // 账号id
			type: String,
			default: ''
		},
		myPublish: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		onShow(val){
			this.initData()
		},
		onReachBottom(val){
			if(this.loadMore == 'more'){
				this.currentPage ++
				this.getActivity()
			}
		}
	},
	mounted(){
		this.initData()
	},
	methods: {
		headHandle(item){
			let info = {}
			info.avatarUrl = item.publicUserPic
			info.userType = item.publicUserType
			info.sex = item.publicUserSex
			return this.utils.headImage(info)
		},
		handleTime(time){
			time = time.split(' ')[0].split('-').join('.')
			return time
		},
		// 获取第一页活动数据
		initData(){
			this.currentPage = 1
			this.activityList = []
			this.getActivity()
		},
		// 获取活动数据
		getActivity(){
			this.loadMore = 'loading'
			let path = '',
			params = {
				page: this.currentPage,
				limit: 10
			}
			if(this.myPublish){
				// 教师查看我的发布
				path = 'activity/getActivityPageByPublicer'
				params.accountId = this.accountId
			}else if(this.accountId){
				// 师生查看个人主页的活动列表
				path = 'activity/getUserActivityPage'
				params.accountId = this.accountId
			}else{
				// 首页自己查看活动列表
				path = 'activity/getActivityPage'
				params.haveMe = true
				params.isExamine = false
			}
			this.api.get(path, params).then(res=>{
				if(res.data.state != 'ok') return
				this.userInfo = getApp().globalData.userInfo;
				this.loadMore = 'more'
				let activitiePage = res.data.activitiePage || res.data.activityUserPage
				let list = activitiePage.list || []
				this.activityList = list
				for(let i=0; i<list.length; i++){
					if(list[i].files.length>5){
						this.handleFilesShow(list[i].files, i)
					}
					
				}
				if(activitiePage.totalPage <= this.currentPage){
					this.loadMore = 'no-more'
				}
			})
		},
		activityDetails(item){
			if (this.userInfo.user_type == 1) {
				uni.navigateTo({
					url: `/pages/teachers/activity-student-details?id=${item.id}`
				})
			} else {
				uni.navigateTo({
					url: `/pages/student/active-details?id=${item.id}&myPublish=${this.myPublish?1:''}&accountId=${this.accountId}&original=${!this.myPublish&&this.accountId?1:''}`
				})
			}
		},
		// 获取显示图片的链接
		handleFilesShow(list, index){
			list = JSON.parse(list)
			let imgs = []
			for(let i=0; i<list.length; i++){
				imgs.push(`${this.api.xiaodeObsUrl}${list[i].path}`)
				
			}
			let obj = this.activityList[index]
			obj.dst_imgs = imgs
			this.$set(this.activityList, index, obj)
		},
		clickOper(inx){
			
			this.deleteIndex = this.deleteIndex == inx ? -1 : inx
		},
		hideDelete(){
			this.deleteIndex = -1
		},
		// 删除自己发布的活动
		delActivity(item, inx){
			this.deleteIndex = -1 
			let fun = () => {
				this.api.post('activity/deleteUserPublicActivity', {
					activityId: item.id
				}).then(res=>{
					if(res.data.state != 'ok') return;
					this.activityList.splice(inx, 1)
				})
			}
			this.utils.showModal('', '确认删除这条内容吗？', fun)
		},
		// 编辑活动内容
		editActivity(item) {
			uni.navigateTo({
				url: `/pages/teachers/publish-page?id=${item.id}`
			})
		}
	}
}
</script>
<style lang="less" scoped>
.ac-item{
	margin-bottom: 20rpx;
	background-color: #fff;
	padding: 32rpx 32rpx 8rpx;
	color: #333333;
}
.info{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.active-type{
	font-size: 28rpx;color: #666666;
}
.user-info{
	display: flex;
	.head{
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
	}
}
.name-time{
	margin-left: 24rpx;
	.name{
		display: block;
		line-height: 44rpx;
		
	}
	.time{
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #999;
	}
}
.operation-module{
	position: relative;
}
.operate-box{
	position: absolute;
	top: 40rpx;
	right: 0;
	background: #fff;
	border-radius: 16rpx;
	padding: 16rpx 0;
	box-shadow: 0 0 21rpx 0 rgba(235, 235, 235, 0.5);
}
.del-recommend{
	display: inline-block;
	white-space: nowrap;
	line-height: 60rpx;
	padding: 0 32rpx;
	
}
.content{
	margin-top: 24rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	white-space: pre-line;
}
.cont-text{
	display: block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.images-box, .video-box{
	margin-top: 40rpx;
}
.images-box{
	
	image{
		width: 215rpx;
		height: 215rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 24rpx;
		&:nth-child(3n){
			margin-right: 0;
		}
	}
}
.no-activity{
	height: calc(100vh - 320rpx);
	// #ifdef H5
	height: calc(100vh - 50px - 320rpx);
	// #endif
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>